<script setup lang="ts">
import {userInfoStore} from "~/stores/userInfoStore";
import {useRouter} from "#vue-router";
import UserAccount from "~/components/userInfoTabContetnt/user-account.vue";
import UserBaseInfo from "~/components/userInfoTabContetnt/user-base-info.vue";
import UserGameInfo from "~/components/userInfoTabContetnt/user-game-info.vue";
import {userUpdateMsg} from "~/api/userApi";
import {successCode} from "~/api/base/http";
import {error, success} from "~/utils/myMessage";
import UserOrder from "~/components/userInfoTabContetnt/user-order.vue";
import {constantStore} from "~/stores/constantStore";

useHead({
  title: constantStore().webTitle + ' -- 个人中心',
  meta: [
    {name: 'keywords', content: constantStore().webKeywords},
    {name: 'description', content: constantStore().webDescription}
  ],
})

const route = useRoute()
const tabUrl = route.params.tab

const tabActive = ref(tabUrl ? tabUrl : "info")
const router = useRouter()

function changeTab(tab = "") {
  switch (tab) {
    case "info":
      tabActive.value = "info";
      break;
    case "account":
      tabActive.value = "account";
      break;
    case "gameInfo":
      tabActive.value = "gameInfo";
      break;
    case "order":
      tabActive.value = "order";
      break;
  }
  // router.push("/user-info/" + tabActive.value);
}

function updateInfoMsg() {
  userUpdateMsg(userInfoStore().loginUser).then(res => {
    if (res.code === successCode) {
      success(res.message)
    } else {
      userInfoStore().initLogUser(true);
      error(res.message)
    }
  })
}
</script>

<template>
  <div class="user-info-box" v-if="userInfoStore().loginUser">
    <div class="left-navigation-box">
      <div @click="changeTab('info')"
           :class="tabActive === 'info'?'navigation-item navigation-active':'navigation-item'">
        个人资料
      </div>
      <div @click="changeTab('account')"
           :class="tabActive === 'account'?'navigation-item navigation-active':'navigation-item'">
        账号设置
      </div>
      <div @click="changeTab('gameInfo')"
           :class="tabActive === 'gameInfo'?'navigation-item navigation-active':'navigation-item'">
        游戏绑定
      </div>
      <div @click="changeTab('order')"
           :class="tabActive === 'order'?'navigation-item navigation-active':'navigation-item'">
        订单详情
      </div>
    </div>
    <div class="right-content-box">
      <div class="content-item" v-if="tabActive === 'info'">
        <user-base-info @update="updateInfoMsg"/>
      </div>
      <div class="content-item" v-else-if="tabActive === 'account'">
        <user-account/>
      </div>
      <div class="content-item" v-else-if="tabActive === 'gameInfo'">
        <user-game-info @update="updateInfoMsg"/>
      </div>
      <div class="content-item" v-else-if="tabActive === 'order'">
        <user-order/>
      </div>
    </div>
  </div>
  <div class="no-user-login" v-else>
    <el-empty description="未登录"/>

    <el-link :underline="false" href="/login?redirect=login">
      跳转登录
    </el-link>
  </div>
</template>

<style scoped lang="scss">
.no-user-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 10rem 0;
  user-select: none;
}

.user-info-box {
  display: flex;
  margin: 1rem 0;

  .left-navigation-box {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 1rem 0;
    width: 18rem;
    height: 40rem;
    transition: all .8s ease; /* 所有属性 1 秒平滑过渡 */
    background-color: var(--item-bgc);

    .navigation-item {
      user-select: none;
      padding: .8rem 5rem;
      margin: .2rem 0;
      cursor: pointer;
    }

    .navigation-active,
    .navigation-item:hover {
      background-color: #f0f0f5;
      font-weight: bolder;
    }
  }

  .right-content-box {
    margin: 0 1rem;
    width: 100%;
  }

}
</style>